<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./vue.js"></script>
  </head>

  <body>
    <div id="app">
      <App></App>
    </div>
    <script>
      Vue.config.productionTip = false
      // 使用extend创建子组件,相对于世界使用new,没有el,一般需要书写name
      const Head = Vue.extend({
        name: 'Head',
        template: '<h2>Head</h2>',
        // 生命周期,页面挂载后
        mounted() {
          console.log(this) // vueComponent
          console.log(this.__proto__) //vueComponent的原型对象
          console.log(this.__proto__.__proto__) // Vue的原型对象
          console.log(this.__proto__.__proto__.__proto__) // Object的原型对象
        },
      })
      //  简写为对象
      const App = {
        name: 'App',
        // 创建组件
        template: '<div> <h1>App</h1><Head /></div>', //使用这种方式会直接替换掉页面中的自定义标签,如果使用el的形式就不会直接替换,会插入
        // 所以vue才创建了两种,一种给组件使用,一种给根组件使用插入,组件因为需要使用自定义标签实现语义化,所以需要替换
        components: {
          Head,
        },
      }
      const vm = new Vue({
        el: '#app',
        data() {
          return {}
        },
        // 注册
        components: {
          // 当在使用components注册时,如果发现传入值不是extend创建的构造方法,会帮我们使用extend创建成构造方法,然后创建实例渲染成虚拟DOM
          // 添加到指定的位置
          App,
        },
      })
    </script>
  </body>
</html>
